<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<!-- ExtJS 样式 -->
<link rel="stylesheet" type="text/css" href="${path}/script/extjs-3.2.1/resources/css/ext-all.css" />
<!-- 先引入底层驱动，一般用ext自己的，如果要使用jquery的，还要先引入jquery库 -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJs all -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
// 1
// 2
// 3
// 4
Ext.onReady(function(){
	// 1.调用button组件的on方法来设置监听函数
	// 问题是都会被初始化
	var btn = new Ext.Button({
		text: "创建新窗口"
	});
	btn.on("click", function(){
		var win = new Ext.Window({width:300, height:200});
		win.show();
	});
	// 2.使用Observable的listeners
	var win = new Ext.Window({
		width: 400,
		height: 500,
		minWidth: 40,
		minHeight: 30,
		minimizable: true, // 最小化按钮
		// 最小化需要自己实现，一般是要隐藏到一个栏里面
		minimize: function(){
			this.hide();
		},
		maximizable: true, // 最大化按钮
		// 窗口底部按钮，不同于items容器中的
		// buttons底层也是把{text: "创建包含树的窗口"}转换，可以传组件对象
		buttons: [{text: "创建包含树的窗口", listeners:{
			click: function(b, e){
				var tree = new Ext.tree.TreePanel({
					title:"小树一棵",
					width:200,
					height:200,
					//renderTo: "hello", // tree.render("hello");
					root:new Ext.tree.AsyncTreeNode({
						text:"树根",children:[{text:"叶子1",leaf:true},{text:"叶子2",leaf:true}]
					})
				});
				var win = new Ext.Window({
					width: 300,
					height: 250,
					modal: true,
					items: [tree]
				});
				win.add(new Ext.Panel({title: "面板"}));
				win.show();
			}
		}}, btn],
		buttonAlign: "center"
	});
	win.show();
});
</script>
</body>
</html>
